<template>
    <div class="c-title">
        <el-tabs type="border-card" class="tabs">
            <el-tab-pane>
                <span slot="label" >
                    <item mark="first" :sel="selected" @change="getVal">
                        <img src="../../../public/images/列表/tabsChild_1_hover.png" slot="activeImg" class="act">
                        <img src="../../../public/images/列表/tabsChild_1.png" slot="normalImg">
                    </item>
                </span>
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="img">
                            <img :src="item.imgSrc" alt="">
                        </div>
                        <div class="content">
                            <span>{{ item.title }}</span>
                            <span style="font-size:12px">时间：{{ item.date }}</span>
                            <span>票价：￥{{ item.price }}起</span>
                        </div>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">
                    <item mark="second" :sel="selected" @change="getVal">
                        <img src="../../../public/images/列表/tabsChild_3_hover.png" slot="activeImg" class="act">
                        <img src="../../../public/images/列表/tabsChild_3.png" slot="normalImg">
                    </item>
                </span>
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="img">
                            <img :src="item.imgSrc" alt="">
                        </div>
                        <div class="content">
                            <span>{{ item.title }}</span>
                            <span style="font-size:12px">时间：{{ item.date }}</span>
                            <span>票价：￥{{ item.price }}起</span>
                        </div>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">
                    <item mark="three" :sel="selected" @change="getVal">
                        <img src="../../../public/images/列表/tabsChild_6_hover.png" slot="activeImg" class="act">
                        <img src="../../../public/images/列表/tabsChild_6.png" slot="normalImg">
                    </item>
                </span>
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="img">
                            <img :src="item.imgSrc" alt="">
                        </div>
                        <div class="content">
                            <span>{{ item.title }}</span>
                            <span style="font-size:12px">时间：{{ item.date }}</span>
                            <span>票价：￥{{ item.price }}起</span>
                        </div>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">
                    <item mark="four" :sel="selected" @change="getVal">
                        <img src="../../../public/images/列表/tabsChild_12_hover.png" slot="activeImg" class="act">
                        <img src="../../../public/images/列表/tabsChild_12.png" slot="normalImg">
                    </item>
                </span>
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="img">
                            <img :src="item.imgSrc" alt="">
                        </div>
                        <div class="content">
                            <span>{{ item.title }}</span>
                            <span style="font-size:12px">时间：{{ item.date }}</span>
                            <span>票价：￥{{ item.price }}起</span>
                        </div>
                    </li>
                </ul>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script>
import item from './item.vue';
import "@/Mock/api_parenting_tabs"

export default {
    name: "change",
    data() {
        return{
            selected:"first",
            lists:[]
        }
    },
    methods: {
        getVal(val){
            this.selected = val;
        }
    },
    components: {
        item
    },
    mounted() {
        this.$http.get("/api/parenting/tabs").then(res=>{
            this.lists = res.data.lists;
            for(let i=this.lists.length;i>0;i--){
                this.lists[i-1].imgSrc = "/images/child"+(i)+".png"
            }
        })
    },
}
</script>
<style scoped>
    .c-title{
        width: 100%;
        height: 100%;
        /* border-bottom: 1px gainsboro solid; */
    }
    .c-title .act{
        border: 1px solid gainsboro;
        border-radius: 15px 15px 0px 0px;
        border-bottom: none;
    }
    .tabs{
        width: 100%;
        height: 100%;
    }
    ul{
        width: 100%;
        height: 400px;
        /* border: 1px solid red; */
        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
        margin-top: 40px;
    }
    ul li{
        list-style: none;
        width: 45%;
        height: 150px;
        /* border: 1px sienna solid; */
    }
    .img{
        width: 55%;
        height: 100%;
        /* border: 1px sienna solid; */
        float: left;
    }
    .img img{
        width: 100%;
        height: 100%;
    }
    .content{
        width: 40%;
        height: 100%;
        /* border: 1px sienna solid; */
        float: right;
        text-align: left;
    }
    .content span{
        display: block;
        height: 30%;
    }
</style>